<template>
  <div class="empty-model-box g-flex-center-center" @click="changeModel">
    <div class="g-flex-start-center">
      <CIcon type="c-xian-xinjian" class="g-mr4" />
      <span class="empty-model-box-text">添加对比模型</span>
    </div>
  </div>
</template>

<script lang="ts" setup name="EmptyModelBox">
import { defineEmits } from 'vue';
const emits = defineEmits(['change']);

function changeModel() {
  emits('change');
}
</script>

<style lang="scss" scoped>
.empty-model-box {
  flex-shrink: 0;
  width: calc(50% - 8px);
  height: 128px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px dashed #e1e6eb;
  cursor: pointer;
  &:hover {
    background: rgba(225, 230, 235, 0.1);
  }
  .empty-model-box-text {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #435970;
    line-height: 22px;
  }
}
</style>
